<template>
  <div class="app-container">
    <el-button class="el-icon-back" type="info" text @click="onBack">返回</el-button>
    <el-form
      ref="isvKeysForm"
      :rules="rulesIsvKeysForm"
      :model="isvKeysFormData"
      label-width="160px"

      style="width: 700px;"
    >
      <el-form-item label="">
        <el-alert
          title="带 ★ 的分配给开发者"
          type="warning"
          :closable="false"
        />
      </el-form-item>
      <el-form-item :label="selfLabel('appId')">
        <div>{{ isvKeysFormData.appKey }}</div>
      </el-form-item>
      <el-form-item v-show="showKeys()" label="秘钥格式">
        <el-radio-group v-model="isvKeysFormData.keyFormat">
          <el-radio :label="1" value="pkcs8">PKCS8(JAVA适用)</el-radio>
          <el-radio :label="2" value="pkcs1">PKCS1(非JAVA适用)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="isvKeysFormData.signType === 2" prop="secret" :label="selfLabel('secret')">
        <el-input v-model="isvKeysFormData.secret" /> <el-button type="info" text @click="onGenSecret">重新生成</el-button>
      </el-form-item>
      <el-tabs v-show="showKeys()" v-model="activeName" type="card" class="keyTabs">
        <el-tab-pane label="ISV公私钥" name="first">
          <el-form-item class="gen-key">
            <el-button type="info" text @click="onGenKeysIsv">重新生成</el-button>
          </el-form-item>
          <el-form-item prop="publicKeyIsv" label="ISV公钥">
            <el-input v-model="isvKeysFormData.publicKeyIsv" type="textarea" />
          </el-form-item>
          <el-form-item prop="privateKeyIsv" :label="selfLabel('ISV私钥')">
            <el-input v-model="isvKeysFormData.privateKeyIsv" type="textarea" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="平台公私钥[可选]" name="second">
          <el-form-item class="gen-key">
            <el-button type="info" text @click="onGenKeysPlatform">重新生成</el-button>
          </el-form-item>
          <el-form-item prop="publicKeyPlatform" label="平台公钥">
            <el-input v-model="isvKeysFormData.publicKeyPlatform" type="textarea" />
          </el-form-item>
          <el-form-item prop="privateKeyPlatform" label="平台私钥">
            <el-input v-model="isvKeysFormData.privateKeyPlatform" type="textarea" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
  .gen-key {margin-bottom: 0px !important;}
  fieldset {border: 1px solid #ccc; color: gray;margin-left: 40px;margin-bottom: 20px;}
  fieldset label {width: 110px !important;}
  fieldset .el-form-item__content {margin-left: 110px !important;}
  .keyTabs .el-tabs__header{margin-left: 70px;}
</style>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import request from '@/utils/request'
import {useMessage} from '@/hooks/message'
const route=useRoute();
const router=useRouter();

const activeName=ref('first')
const isvKeysFormData=reactive({
      appKey: '',
      secret: '',
      keyFormat: 1,
      publicKeyIsv: '',
      privateKeyIsv: '',
      publicKeyPlatform: '',
      privateKeyPlatform: '',
      signType: 1
    })
const validateSecret = (rule, value, callback) => {
    if (isvKeysFormData.signType === 2) {
      if (value === '') {
        callback(new Error('不能为空'))
      }
      if (value.length > 200) {
        callback(new Error('长度不能超过200'))
      }
    }
    callback()
  }
const validatePubPriKey = (rule, value, callback) => {
  if (isvKeysFormData.signType === 1) {
    if (value === '') {
      callback(new Error('不能为空'))
    }
  }
  callback()
}

// Rules for validation
const rulesIsvKeysForm=reactive({
        secret: [
          { validator: validateSecret, trigger: 'blur' }
        ],
        publicKeyIsv: [
          { validator: validatePubPriKey, trigger: 'blur' }
        ],
        privateKeyIsv: [
          { validator: validatePubPriKey, trigger: 'blur' }
        ]
      })




const loadForm = async()=> {
      const resp =await request('/api/isv/keys/get', { appKey: isvKeysFormData.appKey })
      Object.assign(isvKeysFormData, resp.data)
    }
const selfLabel=(lab)=> {
      return '★ ' + lab
    }
const onSubmit=() => {
      isvKeysForm.validate(async (valid) => {
        if (!valid) {
          return;
        }
        await request('/api/isv/keys/update', isvKeysFormData)
        useMessage().success('保存成功')
      })
    }
const onBack=()=> {
      router.push({ path: 'list' })
    }
const onGenKeysPlatform= async ()=> {
      const resp=await request('/api/isv/keys/gen', {})
      useMessage().success('生成平台公私钥成功')
      const data = resp.data;
      isvKeysFormData.publicKeyPlatform = data.publicKey
      isvKeysFormData.privateKeyPlatform = data.privateKey
    }
const onGenKeysIsv=async ()=> {
      const resp = await request('/api/isv/keys/gen', { keyFormat: isvKeysFormData.keyFormat })
      useMessage().success('生成公私钥成功')
      const data = resp.data
      isvKeysFormData.publicKeyIsv = data.publicKey
      isvKeysFormData.privateKeyIsv = data.privateKey
    }
const onGenSecret= async () =>{
      const resp= await request('/api/isv/secret/gen', {})
      isvKeysFormData.secret = resp.data
    }
const showKeys=() =>{
  return isvKeysFormData.signType === 1
}
onMounted(()=>{
  const query = route.query
  isvKeysFormData.appKey = query.appKey
  loadForm()
})
</script>
